<script setup lang='ts'>
import type { FieldValues, PlusColumn } from 'plus-pro-components'

import { refundDetailsApi } from '@fl/api/city-service'

import { useDicts } from '../hooks/use-dicts'

const props = withDefaults(defineProps<{
    id: number
}>(), {
    id: 0,
})

const { getDictLabel } = useDicts()

const visible = defineModel<boolean>('visible', { required: true })
const { id } = toRefs(props)

const formValues = ref<FieldValues>({})

const isFormLoading = ref(false)

const columns: PlusColumn[] = [
    {
        label: '退款编号',
        prop: 'returnCode',
        valueType: 'text',
    },
    {
        label: '退款时间',
        prop: 'afterSaleConfirmTime',
        valueType: 'text',
    },
    {
        label: '售后编号',
        prop: 'afterSaleCode',
        valueType: 'text',
    },
    {
        label: '售后类型',
        prop: 'afterSaleType',
        renderField: (value: number) => getDictLabel('oAfterSaleType', value),
        valueType: 'text',
    },
    {
        label: '售后申请时间',
        prop: 'createTime',
        valueType: 'text',
    },
    {
        label: '用户名称',
        prop: 'userName',
        valueType: 'text',
    },
    {
        label: '订单编号',
        prop: 'orderCode',
        valueType: 'text',
    },
    {
        label: '发货状态',
        prop: 'orderLineStatus',
        renderField: (value: number) => getDictLabel('oOrderStatus', value),
        valueType: 'text',
    },
    {
        label: '商品名称',
        prop: 'skuName',
        valueType: 'text',
    },
    {
        label: '商品金额',
        prop: 'orderAmount',
        renderField: (value: any) => `￥${value}`,
        valueType: 'text',
    },
    {
        label: '退款金额',
        prop: 'afterSaleAmount',
        renderField: (value: any) => `￥${value}`,
        valueType: 'text',
    },
    {
        label: '退款渠道',
        prop: 'orderPayType',
        renderField: (value: number) => getDictLabel('oPayType', value),
        valueType: 'text',
    },
]

function getRefundDetails() {
    isFormLoading.value = true
    refundDetailsApi({
        afterSaleId: id.value,
    }).then((data) => {
        formValues.value = data ?? {}
    }).finally(() => {
        isFormLoading.value = false
    })
}

getRefundDetails()
</script>

<template>
    <PlusDialog v-model="visible"
                width="500"
                title="退款详情"
                :has-footer="false"
                close-on-press-escape
    >
        <el-skeleton v-if="isFormLoading"
                     animated
        />

        <PlusForm v-else
                  v-model="formValues"
                  :columns="columns"
                  :label-width="100"
                  :has-footer="false"
                  :row-props="{ gutter: 20 }"
        />
    </PlusDialog>
</template>

<style lang="scss" scoped>
:deep(.el-form-item--default) {
    margin-bottom: 0;
}
</style>
